블로그나 웹페이지를 작성할 때, 글자나 줄간격 등의 크기를 수자로 지정하게 되는데,
이때 사용되는 단위로는 px(pixel), pt(point), %(percent), em 등이 있다.
대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 이다.
이엠은 현재 지정되어 있는 폰트에서 알파벳 대문자 "M"의 가로 너비를 기준으로 한
상대적인 크기를 배율로 표시하는 단위이다.
em 이 무엇의 약자인가에 대한 명확한 설명을 찾을 수 없다.
다만, "Equal to the width of the capital letter M / 대문자 M의 가로폭과 같다" 라고 설명하는
것에 비추어 볼 때 Equal의 e와 M을 합쳐 만든 것이 아닌가 추측할 따름이다
"지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 "
해당폰트의 소문자 x의 높이를 기준으로 함
픽셀은 모니터에 가로/세로로 이루어진 하나의 격자(사각형)를 말한다.
모니터의 격자 간격을 픽셀피치라고 하며, 대체로 데스크탑 모니터 보다 노트북 모니터가 픽셀피치가 작고,
따라서 글자가 더 작게 보인다. 어쨋거나 1px은 격자 하나의 크기를 뜻한다
포인트는 인치(inch)의 개념이고, 1인치(inch)는 2.54 센티미터(cm : centimeter)이다.
1pt는 72분의 1인치(1/72)를 말한다.
따라서, 포인트는 1pt~ 72pt까지 있습니다
퍼센트는 백분율이며, 상위요소(부모요소, parent element)에 대한 상대적인 비율을 말한다.
즉, 50%는 부모요소 크기의 절반크기라는 뜻이며, 100%는 부모요소와 크기가 같다는 뜻이다.
"지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기"
Size in pixels / parent size in pixel
12px / 16px = 0.75em
Size in pixels / parent size in pixels
12px / 16px x 100 = 75%
Size in pixels x (points per inch / pixels per inch)
16px x (72pt / 96px)= 12pt
Size in EMs x parent size in pixels
0.75em x 16px = 12px
Size in EMs x 100
0.75em x 100 = 75%